<template>
	<view>
		<view class="con">
			<!-- 1，联系人 -->
			<view class="box">
				<view class="left">
					<text>联系人</text>
				</view>
				<view class="right-input">
					<input type="text" placeholder="请输入姓名" v-model="addressObject.name" />
				</view>
			</view>
			<!-- 2，手机号 -->
			<view class="box">
				<view class="left">
					<text>联系人</text>
				</view>
				<view class="right-input">
					<input maxlength="11" type="number" placeholder="请输入手机号" v-model="addressObject.phone" />
				</view>
			</view>
			<!-- 3，服务地址 -->
			<view class="box">
				<view class="left">
					<text>服务地址</text>
				</view>
				<view class="right-input-dz">
					<input type="text" placeholder="请选择服务地址" v-model="addressObject.address" />
				</view>
				<view class="right-dw" @click="getMapLocation">
					<view class="img">
						<image :src="dwImg"></image>
					</view>
					<view class="text">
						<text>定位</text>
					</view>
				</view>
			</view>
			<!-- 4，门牌号 -->
			<view class="box">
				<view class="left">
					<text>门牌号</text>
				</view>
				<view class="right-input">
					<input type="text" placeholder="注：XX栋XX单元XX号" v-model="addressObject.detailAddress" />
				</view>
			</view>
		</view>
		<view class="is-default">
			<view class="box">
				<view class="left-text">
					<text>是否设为默认地址</text>
				</view>
				<view class="right-switch">
					<switch :checked="this.addressObject.isDefault = '1'" color="rgba(10, 163, 71, 1)"
						style="transform: scale(0.6)" @click="switchChange" />
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getMapLocation
	} from '@/api/uniapp/uni.js'

	export default {
		props: ['addressObject'],
		data() {
			return {
				dwImg: require('@/static/img/main/my/address/02.svg'),
				isChecked: false,
			}
		},
		methods: {
			switchChange() {
				if (this.addressObject.isDefault == '1') {
					this.addressObject.isDefault == '0'
				} else {
					this.addressObject.isDefault == '1'
				}
			},
			//获取地址
			getMapLocation() {
				getMapLocation().then(res => {
					this.addressObject.address = res.address
					this.addressObject.accuracy = res.longitude
					this.addressObject.latitude = res.latitude
					//console.log(res)
				})
			},

		}
	}
</script>

<style lang="scss" scoped>
	.con {
		width: 100%;
		background: #fff;
		margin-top: 30rpx;

		.box {
			display: flex;
			// height: 100rpx;
			width: 90%;
			margin-left: 5%;
			padding: 20rpx 0;

			.left {
				width: 20%;

				// line-height: 100rpx;
				// line-height: 60rpx;
				text {
					font-size: 30rpx;
					font-weight: 400;
					color: rgba(0, 0, 0, 1);
				}
			}

			.right-input {
				width: 80%;

				// margin-top: 20rpx;
				input {
					width: 95%;
					height: 60rpx;
					line-height: 60rpx;
					// margin-top: 20rpx;

					font-size: 24rpx;
					font-weight: 400;
					color: rgba(128, 128, 128, 1);
				}
			}

			.right-input-dz {
				width: 65%;

				input {
					width: 95%;
					height: 60rpx;
					// line-height: 60rpx;
					// margin-top: 20rpx;

					font-size: 24rpx;
					font-weight: 400;
					color: rgba(128, 128, 128, 1);
				}
			}

			.right-dw {
				width: 15%;
				display: flex;

				.img {
					image {
						width: 40rpx;
						height: 40rpx;
						margin-top: 10rpx;
					}
				}

				.text {
					font-size: 24rpx;
					line-height: 60rpx;
					font-weight: 400;
					color: rgba(128, 128, 128, 1);
				}
			}
		}
	}

	.is-default {
		width: 100%;
		background-color: #fff;
		margin-top: 30rpx;

		.box {
			display: flex;
			justify-content: space-between;
			width: 90%;
			margin-left: 5%;
		}


		.left-text {
			text {
				font-size: 30rpx;
				font-weight: 400;
				color: rgba(0, 0, 0, 1);
			}
		}
	}
</style>
